<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        .active {
            color: #f00;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>{{ title }}</h1>
    <p>
        router-view（路由的出口，显示路由对应的功能页面） 和 router-link（生成导航链接）
        都是 vue-router 提供的组件

    </p>
    <p>
        需求：希望点击新闻的时候，显示新闻的列表信息

        1. 接口：
        https://yw.52kfw.cn/api/news/flist?currentPage=1&pageSize=100&cate_id=%E5%9B%BD%E5%AE%B6%E4%BA%8B%E5%AE%9E

        2. 调用接口
    </p>
    <hr>
    <ul>
        <li>
            <router-link to="/home">首页</router-link>
            <router-link to="/news">新闻</router-link>
            <router-link to="/about">关于</router-link>
        </li>
    </ul>
    <hr>
    <!--路由显示的位置，常说的 路由的出口-->
    <router-view></router-view>
</div>
</body>

<template id="homeTpl">
    <div>
        <h2>我是首页页面</h2>
    </div>
</template>

<template id="newsTpl">
    <div>
        <h2>我是新闻列表页面</h2>
        <ul v-for="ele in newsList">
            <li>序号：{{ ele._id }}</li>
            <li>标题：{{ ele.title }}</li>
            <li>分类：{{ ele.cate_id }}</li>
            <li>作者：{{ ele.author }}</li>
            <li>
                <router-link :to="'/detail?id=' + ele._id">详情</router-link>
            </li>
        </ul>
    </div>
</template>


<template id="aboutTpl">
    <div>
        <h2>我是关于我们页面</h2>
    </div>
</template>
<template id="detailTpl">
    <div>
        <h2>我是新闻详情页面</h2>
        <p>{{ info.title }}</p>
        <p>{{ info.cate_id }}</p>
        <p>{{ info.author }}</p>
        <p>
            <img :src=" 'https://yw.52kfw.cn' + info.imageUrl" alt="">
        </p>
        <p>{{ info.description }}</p>
    </div>
</template>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.1/axios.js"></script>

<script src="lib/vue/vue.js"></script>
<!--
1. vuejs 之后导入 vue-router 库
-->
<script src="lib/vueRouter/vue-router.js"></script>


<script type="text/javascript">
    /*
    * 2.1 定义功能页面的组件对象
    * */
    const Home = {
        template: '#homeTpl',
    }
    const News = {
        template: '#newsTpl',
        data() {
            return {
                newsList: [],
            }
        },
        created() {
            this.getNewsList();

        },
        methods: {
            async getNewsList() {
                let url = 'https://yw.52kfw.cn/api/news/flist?currentPage=1&pageSize=100&cate_id=%E5%9B%BD%E5%AE%B6%E4%BA%8B%E5%AE%9E';
                let res = await axios.get(url);
                console.log(res);
                this.newsList = res.data.data.list;

            }
        }
    }
    const Detail = {
        data() {
            return {
                newsId: -1,
                info: {},
            }
        },
        template: '#detailTpl',
        created() {
            // 如何获取其他功能页面传递的数据
            console.log(this.$route);
            this.newsId = this.$route.query.id;

            // 进行详情接口的请求
            this.getDetailById();
        },
        methods: {
            async getDetailById() {
                let url = 'https://yw.52kfw.cn/api/news/detail?newsId=' + this.newsId;
                let res = await axios.get(url);

                console.log(res);
                this.info = res.data.data.info;
            }
        }

    }
    const About = {
        template: '#aboutTpl',
    }

    /*
    * 2. 定义路由映射表
    * */
    const routes = [
        // 针对默认首页做个重定向，导航 /home 路由，使得页面初次加载的时候，显示一个功能页面
        {
            path: '/',
            redirect: '/home'
        },

        {
            path: '/home',
            component: Home,
        },
        {
            path: '/news',
            component: News,

        },
        {
            path: '/detail',
            component: Detail
        },
        {
            path: '/about',
            component: About,
        }
    ]

    /*
    * 3. 得到路由实例对象，然后在进行注册
    *
    * VueRouter 是 我们的 lib/vueRouter/vue-router.js 库导入的
    * */
    const router = new VueRouter({
        routes,
        // 当用户点击哪个导航链接，则会给这个导航链接增加一个 active 的class名
        linkActiveClass: 'active',
    });


    /*
    * 4. 在实例化 vue 的时候注册路由对象
    * */
    const vm = new Vue({
        el: '#app',
        router,
        data: {
            title: 'vue-router 的基本使用',
        }
    })
</script>

</html>
